<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="150px" @submit.native.prevent>
      <el-form-item label="人才节点类型">
        <el-select v-model="form.postType" placeholder="请选择人才节点类型">
          <el-option label="自有人才" value="0"></el-option>
          <el-option label="余量人才" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input size="medium" placeholder="请输入人才姓名" v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="mobile">
        <el-input size="medium" placeholder="请输入人才联系方式" v-model="form.mobile"></el-input>
      </el-form-item>

      <el-form-item label="求职岗位1" prop="postTypeId" style="display: inline-block;">
        <job-cascader @childByValue="setJob1" ></job-cascader>
      </el-form-item>
      <!-- <el-form-item label="求职岗位2（选填）" prop="options2" style="display: inline-block;">
        <job-cascader @childByValue="setJob2" ></job-cascader>
      </el-form-item>
      <el-form-item label="求职岗位3（选填）" prop="options3" style="display: inline-block;">
        <job-cascader @childByValue="setJob3" ></job-cascader>
      </el-form-item> -->
      <el-form-item label="性别" prop="sexId">
        <SexSelect @childByValue="setSex"></SexSelect>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input size="medium" placeholder="请输入人才年龄 / 岁" v-model.number="form.age" style="width: 200px;"></el-input>
      </el-form-item>
      <HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#e4e4e4,strength=10);margin: 20px 0" width="100%"
          color=#e4e4e4 SIZE=1></HR>
      <el-form-item label="求职城市" prop="areaCode">
        <CitySelect @childByValue="setCtiy"></CitySelect>
      </el-form-item>

      <el-form-item label="工作起始年">
        <el-date-picker
          v-model="form.startWork"
          type="year"
          placeholder="选择年"
          format="yyyy"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="推荐介绍">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="您可在此简要介绍该离职余量人才相关信息，需求企业参考价值很大哦！
如：职业技能、优势擅长、团队意识、资源能力、执行力、创新精神等。
例：该人才行业经验丰富,做事认真负责,擅长团队管理,执行力较强。"
          v-model="form.profile">
        </el-input>
      </el-form-item>

      <el-form-item>
        <span>注：共享人才节点添加后，默认起始E力值为15，则可为您产生15E豆收益，其他企业与其产生招聘沟通后，您每次可收益15E豆，人才激活后E力值增加，则相应收益增加，每个人才节点仅可被一家企业/个人求职用户共享，仅可为一家企业/个人求职用户产生收益。</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {add} from '@/api/web/talent'
  import {fetchList, fetchCitiesList, fetchTreeList} from '@/api/web/dictionary'
  import {Message} from 'element-ui'
  import {validatePhone} from '@/utils/validate'
  import JobCascader from '@/components/jobCascader/'
  import CitySelect from '@/components/CitySelect/'
  import SexSelect from '@/components/SexSelect/'

  export default {
    name: "Post",
    components: {JobCascader,CitySelect,SexSelect},
    data() {
      return {
        form: {
          postTypeId:[],
          name: '',
          mobile: '',
          postType:'',
          sexId: '',
          age: '',
          areaCode:[],
          startWork:'',
          profile: ''
        },
        rules: {
          name: [{required: true, message: "请输入姓名", trigger: 'blur'}, {min: 2, max: 6, message: '长度在 2 到 6 个字符',}],
          mobile: [{required: true, validator: validatePhone, trigger: 'blur'},],
          postTypeId: [{required: true, message: "请选择岗位", trigger: 'change', type:'array'},],
          sexId: [{required: true, message: "请选择性别", trigger: "blur"}],
          age: [{required: true, message: "请填写年龄", trigger: "blur"}, { type: 'number', message: '年龄必须为数字值'}],
        }
      }
    },
    methods: {
      submit() {
        var postTypeId = this.form.postTypeId;
        console.log(postTypeId)
        this.form.postTypeId = postTypeId.join(",");
        add(this.form).then(response => {
          Message.success("添加成功")
          window.history.back()
        }).catch(err=>{
          this.form.postTypeId = postTypeId;
          console.log(err)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submit()
            return false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }, 
      setJob1(newVal) {
        this.form.postTypeId[0] = newVal[newVal.length-1]
      }, 
      setJob2(newVal) {
        this.form.postTypeId[1] = newVal[newVal.length-1]
      }, 
      setJob3(newVal) {
        this.form.postTypeId[2] = newVal[newVal.length-1]
      }, 
      setCtiy(newVal) {
        this.form.areaCode = newVal[newVal.length-1]
      }, 
      setSex(newVal) {
        this.form.sexId=newVal
      }
    },
    beforeMount() {

    }
  }
</script>

<style scoped>
  .el-input {
    width: 300px;
  }
</style>
